<template>
  <div class="main-header">
    <el-row>
      <!-- 1. 左侧：logo部分 -->
      <el-col :span="4">
        <div class="logo">
          <img src="@/assets/img/logo.png" />
        </div>
      </el-col>

      <!-- 2. 中间：menu部分 -->
      <el-col :span="16">
        <div class="menu">
          <el-menu mode="horizontal" :default-active="defaultActive">
            <template v-for="item in menuItems" :key="item.id">
              <el-menu-item :index="item.id + ''" @click="handleItemClick(item.url)">
                {{ item.label }}
              </el-menu-item>
            </template>
          </el-menu>
        </div>
      </el-col>
      <!-- 3. 右侧：角色信息部分 -->
      <el-col :span="4" v-if="userstore.userMessage.userId">
        <div class="info">
          <el-dropdown>
            <!-- 1. 头像+名称 -->
            <span class="user-info">
              <span class="name">{{ nickname }}</span>
              <el-avatar :size="40" :src="userstore.userMessage.userBust" />
            </span>
            <!-- 2. 下拉列表 -->
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="handleInfoClick">
                  <el-icon><InfoFilled /></el-icon>
                  <span>个人信息</span>
                </el-dropdown-item>
                <el-dropdown-item divided @click="handleExitClick">
                  <el-icon><CircleClose /></el-icon>
                  <span>退出系统</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-col>
      <el-col :span="4" v-else @click="toLogin">
        <!-- 未登录为登录按钮 -->
        <span class="log-info">
          <span>登 录</span>
        </span></el-col
      >
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { LOGIN_TOKEN } from '@/global/constants'
import { useRoute, useRouter } from 'vue-router'
import { computed, toRefs } from 'vue'
import { localCache } from '@/utils/cache'
import useUserStore from '@/store/user/user'
//从userstore获取截取后的图片信息
const userstore = useUserStore()
const { nickname } = toRefs(userstore.userMessage)

const menuItems = [
  { id: 1, label: '首页', url: '/main/index' },
  { id: 2, label: '任务广场', url: '/main/tasksquare' },
  { id: 3, label: '我的项目', url: '/main/projects' },
  { id: 4, label: '我参与的任务', url: '/main/tasks' }
]
const router = useRouter()

// 监听menu item的点击
function handleItemClick(url: string) {
  router.push(url)
}

// el-menu的默认菜单（刷新保持选中状态）
const route = useRoute()
const defaultActive = computed(() => {
  const pathArr = route.path.split('/')
  const path = '/' + pathArr[1] + '/' + pathArr[2]
  let pathMenuId: number = 0
  for (const menu of menuItems) {
    if (menu.url === path) {
      pathMenuId = menu.id
    }
  }
  return pathMenuId + ''
})

// 退出系统按钮点击
function handleExitClick() {
  //先清楚本地保存的用户信息
  localCache.removeCache('user')
  localCache.removeCache(LOGIN_TOKEN)
  userstore.$reset()
  router.push('/login')
}

// 个人信息按钮点击
function handleInfoClick() {
  router.push('/main/users/' + userstore.userMessage.userId)
}

//前往登录页面

const toLogin = () => {
  router.push('/login')
}
</script>

<style lang="less" scoped>
.main-header {
  // 左侧logo部分
  .logo {
    img {
      height: 60px;
    }
  }

  // 中间menu部分
  .menu {
    padding-left: 20px;
  }
  .info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    padding: 0 18px;
    float: right;
    height: 60px;
    outline: none !important;
    border: 0 !important;
    /deep/ .el-dropdown {
      outline: none !important;
      border: 0 !important;
    }
    /deep/ .user-info {
      display: flex;
      align-items: center;
      cursor: pointer;
      border: 0 !important;
      outline: none !important;
      .name {
        font-size: 13px;
        margin-right: 10px;
      }
    }
  }
  .info {
    :global(.el-dropdown-menu__item) {
      line-height: 36px !important;
      padding: 6px 22px;
    }
  }
  .log-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    padding: 0 18px;
    float: right;
    height: 60px;
    cursor: pointer;
  }

  .log-info:hover {
    color: #8bccf2;
  }
}
</style>
